<template>
  <layout fixed-navbar>
    <close-navbar>展会</close-navbar>
    <div
      class="cover"
      aspectratio
      aspectratio-16-9>
      <img
        v-lazy="logo"
        :alt="title"
        aspectratio-content>
    </div>
    <div class="segment"><div class="segment__text">展会详情</div></div>
    <div class="detail mb-16">
      <div class="detail__title">{{ title }}</div>
      <div
        v-if="city"
        class="detail__segment"><div class="detail__label">举办城市：</div><div class="detail__content">{{ city }}</div></div>
      <div
        v-if="date"
        class="detail__segment"><div class="detail__label">举办时间：</div><div class="detail__content">{{ date }}</div></div>
      <div
        v-if="industry"
        class="detail__segment"><div class="detail__label">展会行业：</div><div class="detail__content">{{ industry }}</div></div>
      <div
        v-if="scale"
        class="detail__segment"><div class="detail__label">展会规模：</div><div class="detail__content">{{ scale }}</div></div>
    </div>
    <van-tabs
      v-model="active"
      :offset-top="stickyOffsetTop"
      sticky
      @change="change">
      <van-tab title="展位预定">
        <van-list
          :immediate-check="false"
          v-model="loading"
          :finished="finished"
          @load="onLoad">
          <partner-list
            v-if="list.length > 0"
            class="mt-16">
            <partner-item
              v-for="(item, i) in list"
              :key="i"
              :model="item"/>
          </partner-list>
        </van-list>
      </van-tab>
      <van-tab title="拼团行程">
        <partner-list
          v-if="list.length > 0"
          :immediate-check="false"
          class="mt-16">
          <partner-item
            v-for="(item, i) in list"
            :key="i"
            :model="item"/>
        </partner-list>
      </van-tab>
      <van-tab title="行程定制">
        <partner-list
          v-if="list.length > 0"
          :immediate-check="false"
          class="mt-16">
          <partner-item
            v-for="(item, i) in list"
            :key="i"
            :model="item"/>
        </partner-list>
      </van-tab>
      <van-tab title="展台搭建">
        <partner-list
          v-if="list.length > 0"
          :immediate-check="false"
          class="mt-16">
          <partner-item
            v-for="(item, i) in list"
            :key="i"
            :model="item"/>
        </partner-list>
      </van-tab>
      <van-tab title="展品运输">
        <partner-list
          v-if="list.length > 0"
          :immediate-check="false"
          class="mt-16">
          <partner-item
            v-for="(item, i) in list"
            :key="i"
            :model="item"/>
        </partner-list>
      </van-tab>
      <van-tab title="展会门票">
        <partner-list
          v-if="list.length > 0"
          :immediate-check="false"
          class="mt-16">
          <partner-item
            v-for="(item, i) in list"
            :key="i"
            :model="item"/>
        </partner-list>
      </van-tab>
    </van-tabs>

    <router-link
      :to="'/exhibitions/' + $route.params.id + '/publish'"
      class="btn-publish"/>
  </layout>
</template>

<style lang="scss" scoped>
  .cover {
    position: relative;
    img {
      display: block;
    }
  }
  .segment {
    height: 80px;
    border-bottom: 2px solid #F4F5F8;
    color: #FA8C01;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    &::after, &::before {
      content: '';
      height: 2px;
      background-color: #FA8C01;
      width: 80px;
    }
    &__text {
      margin: 0 16px;
    }
  }
  .detail {
    padding: 16px 32px;
    background-color: #fff;
    &__title {
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 16px;
    }
    &__segment {
      display: flex;
      align-items: center;
      font-size: 28px;
      margin-bottom: 16px;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
    &__label {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      &::before {
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        background-color: #FA8C01;
        margin-right: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
    }
    &__content {
    }
  }

  .btn-publish {
    background: url("./___assets/publish.png") no-repeat;
    background-size: 100% 100%;
    width: 136px;
    height: 136px;
    position: fixed;
    right: 32px;
    bottom: 32px;
    display: block;
  }
</style>

<script>
import Layout from '@/components/Layout'
import PartnerList from '@/components/PartnerList'
import PartnerItem from '@/components/PartnerItem'
import { getPartnerList, getExhibition } from '@/api'
import CloseNavbar from '@/components/CloseNavbar'

export default {
  components: {
    Layout,
    PartnerList,
    PartnerItem,
    CloseNavbar
  },
  data () {
    return {
      city: '',
      industry: '',
      title: '',
      date: '',
      scale: '',
      logo: '',

      active: 0,

      list: [],
      loading: false,
      finished: false,
      page: 1,

      stickyOffsetTop: document.documentElement.clientWidth * 0.12
    }
  },
  watch: {
    '$route': 'fetchData'
  },
  async created () {
    this.resize = () => {
      this.stickyOffsetTop = document.documentElement.clientWidth * 0.12
    }
    window.addEventListener('resize', this.resize)
    if (typeof this.$route.query.cooperationType !== 'undefined') {
      this.active = this.$route.query.cooperationType - 1
    }
    await this.fetchData()
  },
  destroyed () {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    close () {
      this.$router.back()
    },
    async fetchData () {
      const { code, data } = await getExhibition(this.$route.params.id)
      if (code === 1) {
        this.city = data.ex_city
        this.title = data.ex_name
        this.industry = data.ex_industries
        this.date = data.ex_time
        this.logo = data.ex_logo
        this.scale = data.ex_summary
      }
      await this.onLoad()
    },
    async getPartnerList (page, id, type) {
      const { code, data } = await getPartnerList(id, {
        params: {
          type,
          page,
          pageSize: 10
        }
      })
      if (code === 1) {
        const out = data.list.map((e) => {
          return {
            id: e.id,
            logo: e.logo,
            company: e.company_name,
            position: e.position,
            phone: e.telephone,
            name: e.username
          }
        })
        return { list: out, total: data.totalSize }
      }
      return { list: [], total: 0 }
    },
    async onLoad () {
      const { list, total } = await this.getPartnerList(this.page++, this.$route.params.id, this.active + 1)
      for (const item of list) {
        this.list.push(item)
      }
      this.loading = false
      if (this.list.length >= total) {
        this.finished = true
      }
    },
    async change () {
      this.list = []
      this.page = 1
      this.loading = false
      this.finished = false
      await this.onLoad()
    }
  }
}
</script>
